/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {AutoComplete, Button, Form, Input, InputNumber, notification, Select} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import {FormField, FormLayout, ModalFooter} from "antd-extra";

const {Option} = Select;
moment.locale('zh-cn');
const table = 'ProcureOrder';
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            material,
            store, procure
          }) => ({...user, ...material, ...dynamicLabel, ...global, ...procure, ...store}))
export default class ModalSelectMaterial extends FormBase {
  constructor(props) {
    super(props);
    const {materials = []} = this.props;
    this.state = {materials};
  }

  componentDidMount() {
    this.onDataLoad().then(res => this.setState(res));
  }

  async onDataLoad() {
    const {materialCode} = this.state;
    if (materialCode) {
      const res = await this.props.dispatch({
        type: 'material/findOne',
        payload: {code: materialCode}
      });
      const {result = {}} = res;
      const {procureCount = 0} = result;
      return {procureCount};
    }
    return {procureCount: 0};
  }


  renderFoot = () => {
    const {foot, value, modalRef, form, callback} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            const {modalRef, record = {}} = this.props;
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              //   console.log('vvvvvv', values);
              callback(values);
              modalRef.close();
            });
          }}>确定</Button>

          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  getMaterialOpt = (list) => {
    const arr = [];
    _.map(list, item => {
      const {name = '', subcategory = '', spec = '', type = '', number = '', code = '', isRent = false} = item;
      const rent = isRent ? "租用采购" : '';
      const str = name + ' ' + subcategory + ' ' + spec + ' ' + type + ' ' + code + ' ' + rent;
      arr.push(<Option key={code}
                       value={str}
                       label={'material'}>
        {/*{<Tooltip title={opt.code+opt.name+" "+opt.subcategory+" "+opt.spec}> {opt.name}</Tooltip>}*/}
        {str}
      </Option>);
    });
    return arr;

  };
  onSearch = searchText => {
    const {materials = []} = this.props;
    if (!searchText || searchText === '') {
      this.state.materials = materials;
      const _temp = this.state;
      this.setState(_temp);
      return;
    }
    const temp = [];
    _.map(this.props.materials, item => {
      const {name} = item;
      if (name.includes(searchText)) {
        temp.push(item);
      }
    });
    const _temp = this.state;
    _temp.materials = temp;
    this.setState(_temp);
  };

  getMaterialInfo() {
    const {form, cols = 1, record = {}, isPkg = false} = this.props;
    console.log('rrrr', record);
    const {materials = []} = this.state;
    const {
      material,
      name,
      code,
      spec,
      subcategory,
      number,
      unit = "KG",
      type, materialContent
    } = record;
    return <div>
      <FormLayout form={form} cols={cols}>
        <FormField
          label={'选择原料'}
          name={'material'}
          required={true}
          initialValue={material}
        >
          <AutoComplete style={{width: '100%'}}
                        dataSource={this.getMaterialOpt(materials)}
                        allowClear
                        onSearch={this.onSearch}
                        onChange={value => {
                          form.setFieldsValue({store: undefined});
                        }}
                        onSelect={(value, option) => {

                          const {key, props} = option;
                          const {label} = props;

                          this.state[`${label}Code`] = key;
                          this.state[`${label}`] = value;

                          const material = _.find(this.props.materials, item => {
                            return item.code === key;
                          });
                          if (!material) return;
                          const {subcategory, number, code, name, spec, type, unit} = material;
                          form.setFieldsValue({name, code, subcategory, number, spec, type, unit});

                          this.componentDidMount();
                        }}
          >

          </AutoComplete>
        </FormField>
      </FormLayout>
      <FormLayout form={form} cols={2}>
        <FormField
          label={'物料编码'}
          name={'code'}
          initialValue={code}
        >
          <Input style={{width: '100%'}}
                 disabled
          ></Input>
        </FormField>
        <FormField
          label={'物料名称'}
          name={'name'}
          initialValue={name}
        >
          <Input style={{width: '100%'}}
                 disabled
          ></Input>
        </FormField>
        <FormField
          label={'形态'}
          name={'subcategory'}
          initialValue={subcategory}
        >
          <Input style={{width: '100%'}}
                 disabled
          ></Input>
        </FormField>
        <FormField
          label={'物料规格'}
          name={'spec'}
          initialValue={spec}
        >
          <Input style={{width: '100%'}}
                 disabled
          ></Input>
        </FormField>
        <FormField
          label={'物料编号'}
          name={'number'}
          initialValue={number}
        >
          <Input style={{width: '100%'}}
                 disabled
          ></Input>
        </FormField>
        <FormField
          label={'物料类别'}
          name={'type'}
          initialValue={type}
        >
          <Input style={{width: '100%'}} disabled

          ></Input>
        </FormField>
        <FormField
          label={'物料单位'}
          name={'unit'}
          initialValue={unit}
        >
          <Input style={{width: '100%'}} disabled

          ></Input>
        </FormField>
        {<FormField
          label={'原料含量%'}
          name={'materialContent'}
          required={!isPkg}
          initialValue={materialContent}
        >
          <InputNumber
            disabled={isPkg}
            style={{width: '100%'}}
          ></InputNumber>
        </FormField>}
      </FormLayout>;
    </div>;
  }

  render() {
    const {style} = this.props;

    return (
      <div style={{...style}}>
        {this.getMaterialInfo()}

        {this.renderFoot()}
      </div>

    );
  }
}

